<template>
  <div>
    <h1>择器日期时间</h1>
    <el-date-picker v-model="v1"
    :editable="false"
    placeholder="请输入日期"
    type="datetime">
    </el-date-picker>
    <h1>区间选择</h1>
    <el-date-picker v-model="v1"
    :editable="false"
    placeholder="请输入日期"
    type="datetimerange"
    start-placeholder="开始"
    end-placeholder="结束"
    format="yyyy/MM/dd HH:mm:ss">
    </el-date-picker>
    <h1>带快捷选项</h1>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
  </div>
</template>

<script>
  export default{
    name: "DatePickers",
    data(){
      return{
         pickerOptions: {
                  disabledDate(time) {
                    return time.getTime() < Date.now();/* 小于当前的时间不能选 */
                  },
                  shortcuts: [{ /* 设置快捷选项，需要传入 { text, onClick } 对象*/
                    text: '今天', /* 标题文本*/
                    onClick(picker) { /* 选中后的回调函数*/
                      picker.$emit('pick', new Date());  /* 当前时间*/
                    }
                  }, {
                    text: '昨天',
                    onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24);
                      picker.$emit('pick', date);
                    }
                  }, {
                    text: '一周前',
                    onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', date);
                    }
                  }]
                },
        v1:"",
        value1: '',
        value2: '',
      }
    }
  }
</script>

<style>
</style>
